@reference "../../../styles/index.css";

.item {
  @apply xs:max-h-10
    xs:max-w-10
    flex
    h-full
    max-h-12
    w-full
    max-w-12
    items-center
    justify-center
    rounded-full
    border-2
    border-transparent
    bg-neutral-100
    object-cover
    text-xs
    text-neutral-800
    dark:bg-neutral-900
    dark:text-neutral-300;
}

.avatar {
  @apply size-8;

  .wrapper {
    @apply max-xs:block
      max-xs:py-0;
  }
}

.small {
  @apply xs:size-8
    size-10;
}

.medium {
  @apply size-10;
}
